<template>
<!-- 先判断 roleName 是否有值，无值时显示加载中 -->
<div v-if="!roleName">
  <el-loading v-loading="true" element-loading-text="加载中...">
    <div style="height: 1000px;"></div> <!-- 占位高度，避免布局抖动 -->
  </el-loading>
</div>
  <div class="other" v-if="roleName === '护理员'">
    <div class="result">
      <h2>审批结果</h2>
    </div>
    <div class="ca">
      <img src="/src/assets/images/注意1.png">
      <div>
        <h3>{{ isRejected ? '已拒绝' : '审批中' }}</h3>
      </div>
      <div class="oth">{{ isRejected ? '抱歉，您的退住申请已被拒绝。如有疑问，请联系相关审批人员。' : '稍等，退住申请单正在审批中，若该申请单长时间未处理，请联系(审批角色)！' }}</div>
      <!-- 操作记录区域 -->
      <el-card class="operation-record-card" :class="{ 'rejected-record-card': isRejected }">
        <div class="record-header">
          <h3>操作记录</h3>
          <div class="record-status">
            <span class="status-badge" :class="isRejected ? 'rejected' : 'processing'">
              {{ isRejected ? '已拒绝' : '审批中' }}
            </span>
          </div>
        </div>
        <div class="record-timeline" v-if="operationRecords.length">
          <div 
            v-for="(record, index) in operationRecords" 
            :key="index"
            class="timeline-item"
            :class="{ 
              'completed': record.personStatus.includes('已发起') || record.personStatus.includes('已通过') || record.personStatus.includes('已完成'),
              'processing': record.personStatus.includes('审批中') || record.personStatus.includes('已拒绝')
            }"
          >
            <div class="timeline-dot">
              <el-icon 
                :color="record.personStatus.includes('已拒绝') ? '#f56c6c' : (record.personStatus.includes('已通过') || record.personStatus.includes('已发起') || record.personStatus.includes('已完成') ? '#67c23a' : '#409eff')" 
                size="16"
              >
                <Check v-if="record.personStatus.includes('已通过') || record.personStatus.includes('已发起') || record.personStatus.includes('已完成')" />
                <Close v-else-if="record.personStatus.includes('已拒绝')" />
                <Clock v-else />
              </el-icon>
            </div>
            <div class="timeline-content">
              <div class="timeline-title">{{ record.content || '-' }}</div>
              <div class="timeline-desc">{{ record.personStatus || '-' }}</div>
              <div class="timeline-time">{{ record.time || '-' }}</div>
              <div class="timeline-opinion" v-if="record.opinion && record.opinion !== '-'">
                <div class="opinion-label">审批意见：</div>
                <div class="opinion-content">{{ record.opinion }}</div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="loading-tip">加载中...</div>
      </el-card>
    </div>
  </div>

  <div class="drop6-page" v-else>
    <!-- 基本信息卡片 -->
    <el-card class="info-card">
      <h3 class="card-title">基本信息</h3>
      <ul class="info-list">
        <li><span class="label">老人姓名</span><span class="value">{{ basicInfo.elderName || '-' }}</span></li>
        <li><span class="label">老人身份证号</span><span class="value">{{ basicInfo.idCard || '-' }}</span></li>
        <li><span class="label">联系方式</span><span class="value">{{ basicInfo.phone || '-' }}</span></li>
        <li><span class="label">费用期限</span><span class="value">{{ basicInfo.feePeriod || '-' }}</span></li>
        <li><span class="label">护理等级</span><span class="value">{{ basicInfo.nursingLevel || '-' }}</span></li>
        <li><span class="label">入住床位</span><span class="value">{{ basicInfo.bed || '-' }}</span></li>
        <li><span class="label">签约合同</span>
          <span class="value">
            {{ basicInfo.contract || '-' }}
            <a href="#" class="view-link" v-if="basicInfo.contract">查看</a>
          </span>
        </li>
        <li><span class="label">养老顾问</span><span class="value">{{ basicInfo.advisor || '-' }}</span></li>
        <li><span class="label">护理员</span><span class="value">{{ basicInfo.nurse || '-' }}</span></li>
      </ul>
    </el-card>

    <!-- 申请信息卡片 -->
    <el-card class="info-card">
      <h3 class="card-title">申请信息</h3>
      <ul class="info-list">
        <li><span class="label">退住日期</span><span class="value">{{ applyInfo.checkoutDate || '-' }}</span></li>
        <li><span class="label">退住原因</span><span class="value">{{ formatReason(applyInfo.reason) || '-' }}</span></li>
        <li><span class="label">备注</span><span class="value">{{ applyInfo.remark || '-' }}</span></li>
        <li><span class="label">申请人</span><span class="value">{{ applyInfo.applyName || '-' }}</span></li>
        <li><span class="label">申请时间</span><span class="value">{{ applyInfo.applyTime || '-' }}</span></li>
      </ul>
    </el-card>

    <!-- 审批总览区域 -->
    <el-card class="approval-overview-card" :class="{ 'rejected-card': isRejected }">
      <h3 class="card-title">审批总览</h3>
      <div class="approval-container">
        <div class="approval-info">
          <div class="approval-item">
            <span class="approval-label">最终退款金额：</span>
            <span class="approval-value">{{ finalRefundAmount || '0.00' }}元</span>
          </div>
          <div class="approval-item">
            <span class="approval-label">账单审批结果：</span>
            <span class="approval-value" :class="billApprovalStatusClass">
              {{ billApprovalResult || '-' }}
            </span>
          </div>
        </div>

        <div class="approval-action">
          <el-form :model="approvalForm" ref="approvalFormRef" class="approval-form">
            <el-form-item label="是否通过" prop="result"
              :rules="[{ required: true, message: '请选择审批结果', trigger: 'change' }]">
              <el-radio-group v-model="approvalForm.result" class="approval-radios" :disabled="isRejected">
                <el-radio label="pass" class="approval-radio">通过</el-radio>
                <el-radio label="reject" class="approval-radio">拒绝</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="审批意见" prop="opinion"
              :rules="[{ required: true, message: '请输入审批意见', trigger: 'blur' }]">
              <el-input v-model="approvalForm.opinion" type="textarea" placeholder="请输入审批意见（必填）" maxlength="300"
                show-word-limit rows="3" :disabled="isRejected"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>

    <!-- 底部按钮区域 -->
    <div class="button-bar">
      <el-button @click="handleBack" size="default" class="back-button" :loading="isLoading">返回</el-button>
      <el-button v-if="!isRejected" type="primary" @click="handleSubmit" size="default" class="submit-button" :loading="isSubmitting">
        提交审批
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Check, Close, Clock } from '@element-plus/icons-vue';
import { getContent, addContent } from '@/api/drop/content';
import useUserStore from '@/store/modules/user';
import { addTuizhu } from '@/api/rutui/tuizhu';
import { delRuzhuByElderlyId } from '@/api/rutui/ruzhu';
import { getElderly, updateElderly, unbindBedFromElderly } from '@/api/system/elderly';
import { updateBed } from '@/api/bed/bed';
import { getAccraditationrecordByDropContentId, updateAccraditationrecord, delAccraditationrecordByCheckContentId } from '@/api/accraditationrecord/accraditationrecord';
import { delContractByElderlyId } from '@/api/system/contract';
import { getUser } from '@/api/system/user';

const roleName = ref('');

// 组件通信
const emit = defineEmits(['submit-step', 'back-to-list']);
const userStore = useUserStore();

// 接收步骤五传递的参数
const props = defineProps({
  dropContentId: {
    type: [String, Number],
    default: '',
    required: true // 强制要求传递ID，确保数据关联
  }
});

// 状态管理
const isLoading = ref(false);       // 数据加载状态
const isSubmitting = ref(false);    // 提交加载状态

// 数据容器
const basicInfo = ref({});         // 基本信息
const applyInfo = ref({});         // 申请信息
const finalRefundAmount = ref('0.00'); // 最终退款金额
const fullData = ref({});          // 全量历史数据
const operationRecords = ref([]);  // 操作记录

// 审批表单数据
const approvalForm = ref({
  result: '',    // pass:通过, reject:拒绝
  opinion: ''    // 审批意见
});
const approvalFormRef = ref(null);

// 是否已拒绝状态
const isRejected = ref(false);

// 获取当前时间格式化
const getCurrentTimeFormatted = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

// 生成退住单据编号（COUT+年月日时分秒）
const generateCheckOutNo = () => {
  const date = new Date();
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `COUT${year}${month}${day}${hours}${minutes}${seconds}`;
};

// 账单审批结果展示
const billApprovalResult = computed(() => {
  if (!fullData.value.billApproval) return '-';
  const resultMap = {
    'pass': '审批通过',
    'reject': '审批拒绝',
    'return': '驳回修改'
  };
  return resultMap[fullData.value.billApproval.result] || fullData.value.billApproval.resultText || '-';
});

// 账单审批结果样式
const billApprovalStatusClass = computed(() => {
  if (!fullData.value.billApproval) return '';
  return {
    'status-pass': fullData.value.billApproval.result === 'pass',
    'status-reject': fullData.value.billApproval.result === 'reject' || fullData.value.billApproval.result === 'return'
  };
});

// 格式化退住原因
const formatReason = (reason) => {
  const reasonMap = {
    'personal': '个人原因',
    'recovery': '身体康复',
    'dissatisfaction': '服务不满意',
    'other': '其他原因'
  };
  return reasonMap[reason] || reason;
};

// 获取当前时间格式化函数已在上面定义

// 加载步骤五数据
const fetchDataByDropContentId = async () => {
  if (!props.dropContentId) {
    ElMessage.warning('未获取到有效的单据ID，无法加载信息');
    return;
  }

  isLoading.value = true;
  try {
    const response = await getContent(props.dropContentId);
    if (response.code === 200 && response.data?.currentInfo) {
      fullData.value = JSON.parse(response.data.currentInfo);

      // 填充基本信息
      basicInfo.value = {
        elderName: fullData.value.elderName || '',
        idCard: fullData.value.idCard || '',
        phone: fullData.value.phone || '',
        feePeriod: fullData.value.feePeriod || '',
        nursingLevel: fullData.value.nursingLevel || '',
        bed: fullData.value.bed || '',
        contract: fullData.value.contract || '',
        advisor: fullData.value.advisor || '',
        nurse: fullData.value.nurse || ''
      };

      // 填充申请信息
      applyInfo.value = {
        checkoutDate: fullData.value.checkoutDate || '',
        reason: fullData.value.reason || '',
        remark: fullData.value.remark || '',
        applyName: fullData.value.applyName || '',
        applyTime: fullData.value.applyTime || ''
      };

      // 加载最终退款金额（多重校验确保数据正确）
      if (fullData.value.finalRefundAmount) {
        finalRefundAmount.value = fullData.value.finalRefundAmount;
      } else if (fullData.value.billData?.finalRefundAmount) {
        finalRefundAmount.value = fullData.value.billData.finalRefundAmount;
      } else {
        const billData = fullData.value.billData || {};
        const refund = Number(billData.unpaidBills?.totalAmount || 0);
        const arrears = Number(billData.arrearsBills?.totalAmount || 0);
        const deposit = Number(billData.balanceBills?.depositBalance || 0);
        const prepayment = Number(billData.balanceBills?.prepaymentBalance || 0);
        finalRefundAmount.value = (refund - arrears + deposit + prepayment).toFixed(2);
      }

      // 如果有保存的操作记录，直接使用（包括最终审批记录）
      if (fullData.value.operationRecords && fullData.value.operationRecords.length > 0) {
        operationRecords.value = fullData.value.operationRecords;
      } else {
        // 否则加载基本操作记录
        operationRecords.value = [];
      }

      // 检查最终审批是否已拒绝
      if (fullData.value.finalApprovalResult) {
        if (fullData.value.finalApprovalResult.result === 'reject') {
          isRejected.value = true;
          approvalForm.value.result = 'reject';
          approvalForm.value.opinion = fullData.value.finalApprovalResult.opinion || '';
        }
      }

    } else {
      ElMessage.error(`数据加载失败：${response.msg || '接口返回异常'}`);
    }
  } catch (error) {
    console.error('步骤六数据拉取报错：', error);
    ElMessage.error('数据加载异常，请重试');
  } finally {
    isLoading.value = false;
  }
};

// 表单验证
const validateForm = async () => {
  if (!approvalFormRef.value) return false;
  try {
    await approvalFormRef.value.validate();
    return true;
  } catch (error) {
    ElMessage.warning('请完善审批结果与意见');
    return false;
  }
};
defineExpose({ validateForm });

// 返回按钮逻辑
const handleBack = () => {
  ElMessageBox.confirm(
    '确定要现在返回吗？',
    '确认返回',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    emit('back-to-list');
  }).catch(() => { });
};

// 提交审批逻辑（核心：完成退住全流程）
const handleSubmit = async () => {
  // 表单验证
  const isValid = await validateForm();
  if (!isValid) return;

  isSubmitting.value = true;
  const resultMap = { pass: '通过', reject: '拒绝' };
  const currentUser = userStore.nickName || '管理员';
  const currentUserId = userStore.id;
  const currentTime = new Date().toLocaleString('zh-CN', { hour12: false });

  try {
    // 1. 提取关键业务数据（多重来源确保不丢失）
    const elderlyId = fullData.value.elderlyId
      || fullData.value.billData?.arrearsBills?.bills?.[0]?.elderlyId
      || fullData.value.billData?.arrearsBills?.bills?.[0]?.elderly?.id;
    const checkOutDate = applyInfo.value.checkoutDate || fullData.value.checkoutDate;

    // 校验关键数据
    if (!elderlyId) throw new Error('未获取到老人ID，无法完成退住');
    if (!checkOutDate) throw new Error('未获取到退住日期，无法完成退住');
    if (!currentUserId) throw new Error('未获取到当前用户信息，请重新登录');

    // 2. 构建操作记录
    const newRecord = {
      content: '最终审批操作',
      personStatus: `${currentUser} (${resultMap[approvalForm.value.result]})`,
      time: currentTime,
      opinion: approvalForm.value.opinion,
      icon: ''
    };

    // 3. 保存审批记录到流程表
    const submitData = {
      ...fullData.value,
      finalApprovalResult: {
        approver: currentUser,
        approveTime: currentTime,
        result: approvalForm.value.result,
        resultText: resultMap[approvalForm.value.result],
        opinion: approvalForm.value.opinion
      },
      operationRecords: [...operationRecords.value, newRecord],
      currentStep: 6
    };

    const contentResponse = await addContent({
      currentInfo: JSON.stringify(submitData),
      dropContentId: props.dropContentId
    });

    if (contentResponse.code !== 200 || !contentResponse.dropContentId) {
      throw new Error(`流程记录保存失败：${contentResponse.msg || '未返回有效ID'}`);
    }
    const newDropContentId = contentResponse.dropContentId;

    // 4. 审批通过：执行退住业务（添加退住记录→删除入住记录→更新床位状态）
    if (approvalForm.value.result === 'pass') {
      const tuizhuData = {
        checkOutNo: generateCheckOutNo(),
        elderlyId: elderlyId,
        creator: 116,
        checkOutDate: checkOutDate,
        extraField1: newDropContentId, // 关联流程ID
        refundAmount: finalRefundAmount.value // 记录退款金额
      };

      // 4.1 添加退住记录
      const tuizhuResponse = await addTuizhu(tuizhuData);
      if (tuizhuResponse.code !== 200) {
        throw new Error(`退住记录添加失败：${tuizhuResponse.msg || '未知错误'}`);
      }

      // 4.2 删除入住记录
      const delRuzhuResponse = await delRuzhuByElderlyId(elderlyId);
      if (delRuzhuResponse.code !== 200) {
        throw new Error(`入住记录删除失败：${delRuzhuResponse.msg || '未知错误'}`);
      }

      // 4.3 删除入住审批记录（根据老人id---check_content_id）
      const delAccraditationrecordResponse = await delAccraditationrecordByCheckContentId(elderlyId);
      if (delAccraditationrecordResponse.code !== 200) {
        throw new Error(`入住审批记录删除失败：${delAccraditationrecordResponse.msg || '未知错误'}`);
      }

      // 4.4 更新床位状态为空闲（0）
      const laorenResponse = await getElderly(elderlyId);
      if (laorenResponse.code !== 200 || !laorenResponse.data?.bedId) {
        throw new Error('未获取到老人关联的床位信息');
      }
      const bedUpdateResponse = await updateBed({
        id: laorenResponse.data.bedId,
        status: 0
      });
      if (bedUpdateResponse.code !== 200) {
        throw new Error(`床位状态更新失败：${bedUpdateResponse.msg || '未知错误'}`);
      }

      // 4.5 解除老人与床位的绑定关系（将老人的 bed_id 设置为 null）
      const elderlyUpdateResponse = await unbindBedFromElderly(elderlyId);
      if (elderlyUpdateResponse.code !== 200) {
        throw new Error(`老人床位解绑失败：${elderlyUpdateResponse.msg || '未知错误'}`);
      }

      // 4.6 清除老人合同
      const delContractResponse = await delContractByElderlyId(elderlyId);
      if (delContractResponse.code !== 200) {
        throw new Error(`合同删除失败：${delContractResponse.msg || '未知错误'}`);
      }

      ElMessage.success('最终审批通过，退住流程已完成');
      emit('submit-step', { newDropContentId: newDropContentId });

      // 5. 审批拒绝：返回列表
          } else {
        ElMessageBox.confirm(
          '确定要拒绝该申请吗？',
          '确认拒绝',
          { type: 'error' }
        ).then(() => {
          ElMessage.success('申请已拒绝');
          emit('back-to-list');
        });
      }

    // 最后更新审批表
    const approvalRecords = await getAccraditationrecordByDropContentId(props.dropContentId);
    
    const updateRecord = {
      id: approvalRecords.data.id,
      dropContentId: contentResponse.dropContentId,
      currentStep: "退住审批",
      approverName: currentUser,
    };

    // 如果是拒绝，设置拒绝相关字段，并保持stepNo为6
    if (approvalForm.value.result === 'reject') {
      updateRecord.nextStep = "已拒绝";
      updateRecord.stepNo = "6"; // 不再往下一步骤走
      updateRecord.handleType = "已拒绝";
      updateRecord.auditStatus = "拒绝";
      updateRecord.opinion = approvalForm.value.opinion;
      updateRecord.finishTime = getCurrentTimeFormatted();
    } else {
      // 正常通过，流程结束
      updateRecord.auditStatus = "通过";
      updateRecord.nextStep = "费用清算";
      updateRecord.stepNo = "-1";
      updateRecord.handleType = "已审批";
      updateRecord.opinion = approvalForm.value.opinion;
      updateRecord.finishTime = getCurrentTimeFormatted();
    }

    await updateAccraditationrecord(updateRecord);

  } catch (error) {
    console.error('步骤六提交报错：', error);
    ElMessage.error(`操作失败：${error.message || '系统异常'}`);
  } finally {
    isSubmitting.value = false;
  }
};

// 组件挂载时加载数据
onMounted(() => {

  //获取当前用户信息
  getUser(userStore.id).then(res => {
    roleName.value = res.data.roles[0].roleName;
  });

  console.log('步骤六接收参数：', { dropContentId: props.dropContentId });
  fetchDataByDropContentId();
});
</script>

<style scoped>
.other .ca {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 80px;
}

.other h3 {
  margin-top: 20px;
}

.other .operation-record-card {
  margin-top: 30px;
  width: 600px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  height: auto;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.record-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.record-status {
  display: flex;
  align-items: center;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.processing {
  background-color: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}

.record-timeline {
  position: relative;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  position: relative;
}

.timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 12px;
  top: 32px;
  width: 2px;
  height: calc(100% + 4px);
  background-color: #e4e7ed;
}

.timeline-item.completed:not(:last-child)::after {
  background-color: #67c23a;
}

.timeline-item.processing:not(:last-child)::after {
  background-color: #409eff;
}

.timeline-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.timeline-item.completed .timeline-dot {
  background-color: #f0f9ff;
  border: 2px solid #67c23a;
}

.timeline-item.processing .timeline-dot {
  background-color: #f0f9ff;
  border: 2px solid #409eff;
}

.timeline-content {
  flex: 1;
  padding-top: 2px;
}

.timeline-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.timeline-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 6px;
}

.timeline-time {
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}

.timeline-opinion {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 12px;
  margin-top: 8px;
}

.opinion-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
  font-weight: 500;
}

.opinion-content {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

.other img {
  width: 60px;
  height: 60px;
}

.oth {
  color: #333;
  font-size: 14px;
}


/* 样式部分保持不变 */
.drop6-page {
  padding: 20px;
  background-color: #f9fafb;
  min-height: 100vh;
}

.info-card,
.approval-overview-card {
  margin-bottom: 20px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 15px;
}

.card-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
  gap: 12px 20px;
}

.info-list li {
  display: flex;
  margin-bottom: 0;
  line-height: 24px;
}

.label {
  width: 100px;
  text-align: right;
  margin-right: 16px;
  color: #666;
  font-size: 14px;
  flex-shrink: 0;
}

.value {
  flex: 1;
  font-size: 14px;
  color: #333;
  word-break: break-all;
}

.view-link {
  color: #409eff;
  margin-left: 8px;
  text-decoration: none;
  font-size: 14px;
}

.view-link:hover {
  text-decoration: underline;
}

.approval-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.approval-info {
  flex: 1;
  min-width: 300px;
}

.approval-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.approval-label {
  width: 120px;
  text-align: right;
  margin-right: 16px;
  color: #666;
  font-size: 14px;
  flex-shrink: 0;
}

.approval-value {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.status-pass {
  color: #52c41a;
  font-weight: 500;
}

.status-reject {
  color: #f5222d;
  font-weight: 500;
}

.approval-action {
  flex: 1;
  min-width: 300px;
  padding: 10px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

.approval-form {
  width: 100%;
}

.approval-radios {
  display: flex;
  gap: 15px;
  margin-top: 5px;
}

.approval-radio {
  display: flex;
  align-items: center;
}

.button-bar {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 30px;
}

.back-button {
  min-width: 120px;
}

.submit-button {
  min-width: 120px;
}

@media (max-width: 768px) {
  .drop6-page {
    padding: 10px;
  }

  .info-list {
    grid-template-columns: 1fr;
  }

  .info-list li,
  .approval-item {
    flex-direction: column;
  }

  .label,
  .approval-label {
    width: 100%;
    text-align: left;
    margin-right: 0;
    margin-bottom: 4px;
  }
}

/* 拒绝状态样式 */
.rejected-card {
  background-color: #fef0f0;
  border: 1px solid #fbc4c4;
}

.rejected-record-card {
  background-color: #fef0f0;
  border: 1px solid #fbc4c4;
}

.status-badge.rejected {
  background-color: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fbc4c4;
}
</style>